<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/plantillas/defaultTemplate.xhtml"
                xmlns:i="http://java.sun.com/jsf/composite/components/presentacion"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="titulo">
        Indicadores de RRHH
    </ui:define>

    <ui:define name="acciones">
        <p:tab title="Otras acciones">
            <h:panelGrid columns="1">
                <p:commandLink styleClass="opcionMenu" ajax="true" action="#{reportes$indicador.inicio$action}">
                    <p:graphicImage value="/resources/iconos/application-exit.png"/>
                    <h:outputText value="Cancelar" styleClass="espacioTexto"/>
                </p:commandLink>
            </h:panelGrid>
        </p:tab>
    </ui:define>

    <ui:define name="contenido">

        <p:spacer height="10" />

        <p:panel id="fldIndicadores" style="border:none;" >
            <h:panelGrid columns="1">
                <h:outputLabel value="Ingrese los rangos de fecha para calcular los indicadores." />
            </h:panelGrid>
            <p:spacer height="5" />
            <h:panelGrid columns="5" >
                <i:etiquetaRequerido value="Fecha inicial" />
                <p:calendar showOn="button" value="#{reportes$indicador.fechaInicial}" label="Fecha Inicial" title="Fecha Inicial" required="true" requiredMessage="Fecha inicial es un campo requerido." />
                <i:etiquetaRequerido value="Fecha final" />
                <p:calendar showOn="button" value="#{reportes$indicador.fechaFinal}" label="Fecha Final" title="Fecha Final" required="true" requiredMessage="Fecha Final es un campo requerido." />
                <p:commandButton image="button-ok" value="Aplicar" update="principalForm:model,principalForm:detalle,principalForm:panelTable,principalForm:lblValor,principalForm:lblNombre,principalForm:lblCategoria,principalForm:panelContenido,principalForm:mensajes" action="#{reportes$indicador.aplicar}" />
            </h:panelGrid>
            <p:spacer height="10" />
            <p:panel id="panelTable" > 
                <table width="100%" >                                
                    <ui:repeat id="model" value="#{reportes$indicador.modelIndicadores}" var="modelIndicador" >
                        <tr>
                            <td colspan="3" width="100%" >
                                <h:outputLabel id="lblCategoria" value="#{modelIndicador.categoria}" style="width: 150px;font-weight: bold; " />
                            </td>
                        </tr>

                        <ui:repeat id="detalle" value="#{modelIndicador.listaIndicadores}" var="indicador" >
                            <tr>
                                <td width="3%">

                                </td>
                                <td width="50%" >
                                    <h:outputLabel id="lblNombre" value="#{indicador.nombreIndicador}" style="width: 150px;" />
                                </td>
                                <td width="10%" ></td>
                                <td width="30%" >
                                    <h:outputLabel id="lblValor" value="#{indicador.valorIndicador}" />
                                </td>
                            </tr>
                        </ui:repeat>
                        <tr>
                            <td colspan="3" ><p:spacer height="10" /></td>
                        </tr>
                    </ui:repeat>
                </table>
            </p:panel>
        </p:panel>

    </ui:define>

</ui:composition>
